@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(74);
    position: absolute;
    top: 0;
    a {
        height: r(74);
        left: r(28);
        position: absolute;
        color: #000000;
        img{
            width: r(22);
            height: r(38);
            vertical-align: top;
            position: relative;
            top: r(16);
        }
    }
    p {
        font-size: r(28);
        text-align: center;
        line-height: r(74);
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(75);
    bottom: r(0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .line {
        width: 100%;
        height: r(1);
        border-top: 1px solid #A7A7A7;
        background: #A7A7A7;
    }
    article {
        .ul_top {
            height: r(98);
            font-size: r(30);
            ul {
                width: r(584);
                margin: 0 auto;
                li:nth-child(4) {
                    border: none;
                }
                li {
                    height: r(98);
                    line-height: r(98);
                    border-bottom: 1px solid #dcdcdc;
                    span:nth-of-type(1) {
                        color: #737373;
                    }
                    span:nth-of-type(2) {
                        margin-left: r(24);
                    }
                    .link {
                        img {
                            width: r(35);
                            height: r(35);
                            vertical-align: middle;
                        }
                    }
                }
            }
            .number {
                width: 100%;
                background: #f2f2f2;
                height: r(60);
                font-size: r(24);
                p {
                    line-height: r(60);
                    width: r(584);
                    margin: 0 auto;
                    span:nth-of-type(even) {
                        margin-left: r(20);
                        margin-right: r(50);
                    }
                }
            }
            .ul_bottom {
                li {
                    
                    .on-off {
                        width: r(100);
                        height: r(60);
                        background: #000000;
                        border-radius: r(30);
                        margin-top: r(20);
                        border:r(2) solid #B2B2B2;
                        position: relative;
                        transition: all 200ms;
                        button {
                            width: r(66);
                            height: r(66);
                            border-radius: r(56);
                            background: #FFFFFF;
                            position: absolute;
                            left: r(0);
                            top: r(-3);
                            border: r(1) solid #BBBBBB;
                            transition: all 180ms;
                        }
                    }
                    &.active{
                        .on-off{
                            background: #FFFFFF;
                           
                        }
                        button{
                            left:r(36);
                        }
                    }
                }
            }
            .member-table {
                width: r(584);
                height: r(399);
                margin: 0 auto;
                border: r(2) solid #828282;
                border-radius: r(15);
                background: #f2f2f2;
                margin-top: r(30);
                p {
                    width: r(551);
                    margin: 0 auto;
                    margin-top: r(30);
                    font-size: r(24);
                    color: #373737;
                    a {
                        color: #9c9c9c;
                    }
                }
                ul {
                    margin-top: r(26);
                    margin: o auto;
                    width: r(546);
                    margin-left: r(60);
                    li {
                        float: left;
                        margin-right: r(40);
                        border: none;
                        height: r(94);
                        width: r(90);
                        .mumber_img {
                            width: r(56);
                            height: r(56);
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        span {
                            color: #111111;
                            font-size: r(14);
                            text-align: center;
                            position: relative;
                            top: r(-30);
                            margin-left: r(-25);
                            width: r(120);
                            height: r(80);
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
            .return{
                a{
                    width: r(300);
                    height: r(58);
                    background: #333333;
                    color: white;
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    line-height: r(58);
                    border-radius: r(15);
                    margin-top: r(32);
                    margin-bottom: r(176);
                }
            }
        }
    }
}